<template>
	<view class="limit-buying">
		<block v-if="show">
			<view class="limit-buying-prolist" v-if="list.length">
				<view class="pro-item" v-for="(data,index) in list" :key="index" @click="goMerchantProInfo(data)">
					<u-image :src="data.image" width="230" height="230" mode="aspectFill" border-radius="8"></u-image>
					<view class="pro-item-info">
						<view class="goods-name">{{data.store_goods_name}}</view>
						<view class="goods-tag">
							<!-- <view class="tag">{{data.invitation}}</view> -->
							<view class="sale-num">已售{{data.sell_number}}</view>
						</view>
						<view class="goods-price">
							<view class="goods-price-left">
								<view class="after-price">秒杀价：￥<text>{{data.activity_price}}</text></view>
								<view class="before-price">原价：￥<text>{{data.retail_price}}</text></view>
							</view>
							<view class="goods-price-right">
								<view class="btn">马上抢</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<pt-loading-more v-if="loadingMore"></pt-loading-more>
			<pt-nomore v-if="noMore && list.length"></pt-nomore>
			<pt-nothing
				text="暂无秒杀商品"
				:fixed="true"
				bgColor="#FFF"
				icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1"
				v-if="noMore && !list.length">
			</pt-nothing>
		</block>
		<ls-loading
			text="AIMEIJIA"
			animation="progress" 
			fontSize="40" 
			highlightColor="#FCBB06"
			:tab="false"
			v-if="$store.state.loading">
		</ls-loading>
		<u-no-network zIndex="997"></u-no-network>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				swiperList: [],
				typesItemIndex: 0,
				typesItem: [],
				user_count: 0,
				user_list: [],
				timestamp: 0,
				page: 0,
				loadingMore: false,
				noMore: false,
				list: [],
				kill_id: ''
			};
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.loadingMore = true
				this.getKill2(1)
			}
		},
		onLoad(){
			this.init()
		},
		methods: {
			async init(){
				await this.getKill2(1)
				this.show = true
			},
			async getKill2(){
				const { datas } = await this.$u.api.StoreGoodsList({
					page: this.page,
					goods_type: 4,
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1
				})
				this.loadingMore = false
				if(datas.length){
					datas.forEach(item => {
						this.list.push(item)
					})
				}else{
					this.noMore = true
				}
			},
			goProductInfo(goods_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/product-model/product-info/product-info?goods_id='+goods_id+'&kill_id='+this.kill_id
				})
			},
			// 跳转秒杀商品详情
			goMerchantProInfo(data){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/product-info/product-info?isMerchant=ture&goods_id='+data.store_goods_id
				})
			},
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #F8F8F8;
	}
	.limit-buying{
		.limit-buying-swiper{
			padding: 20rpx 30rpx 0;
			background-color: #FFF;
		}
		.limit-buying-types{
			padding: 20rpx 30rpx 0;
			display: flex;
			align-items: center;
			background-color: #FFF;
			.types-item{
				width: 200rpx;
				height: 100rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
				margin-right: 45rpx;
				&:last-child{
					margin-right: 0;
				}
				.time{
					font-size: 36rpx;
					color: #3C3C3C;
					font-family: 'din';
				}
				.name{
					font-size: 24rpx;
					margin: 6rpx 0;
					color: #757575;
				}
				&.active{
					background-color: #F7F7F7;
					.time{
						color: #FF624D;
					}
					.name{
						color: #FF624D;
					}
				}
			}
		}
		.limit-buying-num-countdown-bg{
			padding: 30rpx;
			background-color: #FFF;
		}
		.limit-buying-num-countdown{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #F7F7F7;
			padding: 15rpx 20rpx;
			border-radius: 8rpx;
			.limit-buying-num{
				display: flex;
				align-items: center;
				.avatars{
					display: flex;
					align-items: center;
					margin-right: 20rpx;
					.avatar-item{
						margin-left: -20rpx;
						&:first-child{
							margin-left: 0;
						}
					}
				}
				.label{
					font-size: 24rpx;
					color: #757575;
				}
			}
			.limit-buying-countdown{
				display: flex;
				align-items: center;
				.label{
					margin-right: 20rpx;
					color: #757575;
					font-size: 24rpx;
				}
				.count-down{
					/* #ifdef APP-PLUS */
					margin-top: -4rpx;
					/* #endif */
				}
			}
		}
		.limit-buying-prolist{
			padding: 20rpx 30rpx 0;
			.pro-item{
				// margin-top: 20rpx;
				display: flex;
				align-items: flex-start;
				padding: 15rpx;
				background-color: #FFF;
				border-radius: 8rpx;
				.pro-item-info{
					flex: 1;
					min-width: 0;
					margin-left: 30rpx;
					.goods-name{
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						font-size: 28rpx;
						font-weight: bold;
					}
					.goods-tag{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 20rpx;
						.tag{
							line-height: 40rpx;
							border: 2rpx solid #E6E6E6;
							border-radius: 40rpx;
							font-size: 22rpx;
							color: #757575;
							padding: 0 15rpx;
						}
						.sale-num{
							font-size: 22rpx;
							color: #999;
						}
					}
					.goods-price{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 30rpx;
						.goods-price-left{
							.after-price{
								font-size: 22rpx;
								color: #F59359;
								text{
									font-size: 36rpx;
									font-family: 'din';
								}
							}
							.before-price{
								color: #999;
								font-size: 22rpx;
								margin-top: 10rpx;
								text-decoration: line-through;
							}
						}
						.goods-price-right{
							.btn{
								width: 120rpx;
								line-height: 70rpx;
								background: #F59359;
								border-radius: 8rpx;
								color: #FFF;
								text-align: center;
								&.disabled{
									opacity: .5;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
